<template>
  <div style="margin-top: 50px">
    <el-form :model="form" ref="productSpecForm" label-width="120px" style="width: 720px" size="small">
      <div class="filter-container">
          <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="edit" @click="addGoodSpec">新增规格</el-button>
        </div>
        <el-card class="box-card">
          <table>
            <tr>
              <td>
                <el-form-item label="规格名称" prop="specName">
                  <el-input placeholder="请输入规格名称" v-model="form.specName"></el-input>
                </el-form-item>
              </td>
              <td>
                <el-form-item label="库存数量" prop="formStockQuantity">
                  <el-input placeholder="请输入库存数量" type="number" v-model.number="form.formStockQuantity"></el-input>
                </el-form-item>
              </td>
              <td>
                <el-form-item label="净含量" prop="formNetWeight">
                  <el-input placeholder="请输入净含量" v-model.number="form.formNetWeight"></el-input>
                </el-form-item>
              </td>
              <td>
                <el-form-item label="净含量单位" prop="formNetWeightUnit">
                  <el-input placeholder="请输入净含量单位" v-model="form.formNetWeightUnit"></el-input>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td>
                <el-form-item label="原价（元）" prop="formPrice">
                  <el-input placeholder="请输入原价" type="number"  v-model.number="form.formPrice"></el-input>
                </el-form-item>
              </td>
              <td>
                <el-form-item label="现价（元）" prop="formMemberPrice">
                  <el-input placeholder="请输入现价" type="number"  v-model.number="form.formMemberPrice"></el-input>
                </el-form-item>
              </td>
              <td>
                <el-form-item label="底价（元）" prop="formMenchantPrice">
                  <el-input placeholder="请输入底价" type="number" v-model.number="form.formMenchantPrice"></el-input>
                </el-form-item>
              </td>
            </tr>
          </table>
        </el-card>
        <good-spec v-for="(item,index) in allComponents" :key="index" :index="index" @remove="remove" :ref="`goodSpec${index}`" @uploadData="getData" :items="allComponents"></good-spec>
      <el-form-item style="text-align: center">
        <el-button size="medium" @click="handlePrev">上一步，填写商品详情</el-button>
        <el-button type="primary" size="medium" @click="handleFinishCommit">完成，提交商品</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import {getPicklist} from 'api/param/picklist/index';
import {getAllShopList} from 'api/shop/shops/index';
import { getToken } from 'utils/auth';
import { fetchTree } from 'api/shop/goods/category/index';
import { mapGetters } from 'vuex';
import goodSpec from './goodSpec.vue'

  export default {
    name: "ProductSpecDetail",
    components: {'good-spec' :goodSpec},
    props: {
      isEdit: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        form: Object,
        allComponents: []
      }
    },
    computed: {
    },
    created() {
    },
    watch: {
    },
    methods: {
      addGoodSpec(){
        this.allComponents.push({})
      },
      //删除子组件
      remove(index){
        console.log("splice:"+index);
        this.allComponents.splice(index,1); 
        console.log('deleted:', JSON.stringify(this.allComponents))
      },
      //  get the data from child
      getData: function (val) {
        let index = val.index
        this.allComponents[index] = val.data
        console.log('I got the data:', JSON.stringify(this.allComponents))
        // let data = this.$refs[`goodSpec${val.index}`]
      },
      handlePrev() {
        this.$emit('prevStep')
      },
      handleFinishCommit(){
  
        let goodSpecData = [];
        this.allComponents.forEach(async (e, i) => {
          let component = this.$refs[`goodSpec${val.index}`]
          goodSpecData.push(await component.validateForm());
        })
        //当有一个组件的校验没有通过  就是return
        if (goodSpecData.some(e => !e.valid)) {
          return;
        }
        //这个data就是数据集合
        let datas = goodSpecData.map( e => e.data);
        console.log(datas);
        this.$emit('finishCommit',this.isEdit);
      }
    }
  }
</script>

<style scoped>
  .littleMarginLeft {
    margin-left: 10px;
  }

  .littleMarginTop {
    margin-top: 10px;
  }

  .paramInput {
    width: 250px;
  }

  .paramInputLabel {
    display: inline-block;
    width: 100px;
    text-align: right;
    padding-right: 10px
  }

  .cardBg {
    background: #F8F9FC;
  }
</style>
